嗨嗨！我是Winnie溫尼～

前言

還記得我們在前面的章節學到的陣列array嗎？接下來就來認識更多陣列的處理方法啦！今天就由forEach打頭陣，一起來看看吧～！

forEach

將陣列內的每個元素，皆傳入並執行函式，意指筆的陣列資料就會執行幾次函式。

array.forEach(function(item,index,array){
    要執行的動作;
});

第一個參數(item)：取出該筆陣列元素的值
第二的參數(index)：該筆陣列元素的索引值
第三的參數(index)：當下的陣列資料
註1：如果只需要陣列的值，也可只帶入第一個參數
註2：參數可自訂名稱
例：

let data = ["red", "orange", "yellow"];
data.forEach(function (item, index, array) {
  console.log(item, index, array);
});
//"red" 0 [object Array] (3)["red","orange","yellow"]
//"orange" 1 [object Array] (3)["red","orange","yellow"]
//"yellow" 2 [object Array] (3)["red","orange","yellow"]

應用

• 數字累加

let data = [0, 1, 2, 10, 50, 100];
let total = 0;
data.forEach(function (item, index, array) {
  total += item;
});
console.log(total); //163

• 搭配邏輯判斷，判斷有幾個的偶數

let data = [0, 1, 2, 10, 50, 100];
let evenData = [];
let countEvenNum = 0;
data.forEach(function (item, index, array) {
  if (item % 2 === 0) {
    evenData.push(item);
    countEvenNum += 1;
  } else {
    return;
  }
});
console.log(evenData); // [object Array] (5)[0,2,10,50,100]
console.log(countEvenNum); //5

參考資料

Array.prototype.forEach()
JS 迴圈升級的陣列 Array 方法 forEach()

新手上路，如文章有錯誤或需修正之處，懇請大家多多指教！
那麼，我們明天見囉～